<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/store.png" alt> 门店管理
    </div>
    <div class="continer">
      <h1 class="home_sit_bg">房间设置</h1>
      <div class="section" v-for="(item,index) in list" :key="index">
        <div class="xian"></div>
        <div class="left_box">
          <form action method="GET" class="form_ab_house">
            <label for>
                <input class="checkroom" type="checkbox" v-model="item.change" name="" id="">
              <a class="text_nm">
                <img class="red" src="../../images/main/red.png" alt>房间1类型：
              </a>
              <input type="text" placeholder="请填写房间类型" class="first_ip" v-model="item.roomType">
            </label>
            <label for>
              <a class="text_nm">
                <img class="red" src="../../images/main/red.png" alt>房间面积：
              </a>
              <input type="text" placeholder="10~12" class="next_ip" v-model="item.roomArea">
              <div class="blue_part">约/平米</div>
            </label>
            <label for>
              <a class="text_nm">
                <img class="red" src="../../images/main/red.png" alt>建议容纳人数：
              </a>
              
              <input type="text" placeholder="12" class="next_ip" v-model="item.roomAccommodate">
              <div class="blue_part">人</div>
            </label>
            <label for>
              <a class="text_nm">
                <img class="red" src="../../images/main/red.png" alt>上传房间照片：
              </a>
              <img class="pl_photo" :src="item.roomImg">
            </label>
            <div class="red_tips">请上传房间照片</div>
            <label for>
              <a class="text_nm">
                <img class="red" src="../../images/main/red.png" alt>营业时间：
              </a>

              <input type="checkbox" class="check_part" v-bind:false-value="0" v-bind:true-value="1"  v-model="item.businessHours[0]">周一
              <input type="checkbox" class="check_part" v-bind:false-value="0" v-bind:true-value="1" v-model="item.businessHours[1]">周二
              <input type="checkbox" class="check_part" v-bind:false-value="0" v-bind:true-value="1" v-model="item.businessHours[2]">周三
              <input type="checkbox" class="check_part" v-bind:false-value="0" v-bind:true-value="1" v-model="item.businessHours[3]">周四
              <input type="checkbox" class="check_part" v-bind:false-value="0" v-bind:true-value="1" v-model="item.businessHours[4]">周五
              <input type="checkbox" class="check_part" v-bind:false-value="0" v-bind:true-value="1" v-model="item.businessHours[5]">周六
              <input type="checkbox" class="check_part" v-bind:false-value="0" v-bind:true-value="1" v-model="item.businessHours[6]">周日
            </label>
          </form>
        </div>

        <div class="right_box">
          <div class="three_box">儿童乐园</div>
          <div class="three_box">绘本区</div>
          <div class="three_box">共享教室</div>

          <div class="tips_wx">温馨提示：
            <br>建议上传尺寸为960*675，大小不超过4M,jpg或png格式。
          </div>

          <div class="cli_part">点击上传</div>
        </div>
      </div>
      <div class="btn">
          <div @click="addRoom()">增加房间</div>
          <div @click="delRoom()">删除房间</div>
          <div @click="saveRoom()">保存</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import qs from 'qs' // 将请求转换成form 表单提交形式
export default {
    data () {
        return {
            list:[{
                roomType:'',
                roomArea:'',
                roomImg:'',
                businessHours:[0,0,0,0,0,0,0],
                roomAccommodate:'',
            }],
            times: {

            },
            params: this.decodeJson( this.$route.query.p )
        }
    },
    methods : {
        /**
         *  获取房间数量
         */
        getRoomList: function () {
            let that = this
            axios({
                method:'post',
                url:`/room/selectByStoreId`,
                data:qs.stringify({storeId: this.params.storeId })
            }).then(res => {
                if (res.data.code == 0) {
                res.data.data.map( (val)=> {
                        val.businessHours = val.businessHours.split(',')
                })
                that.list = res.data.data
                }
            })
        },
        /**
         * 增加房间
         */
        addRoom: function () {
            let that = this
             that.list.push({
                roomType:'',
                roomArea:'',
                roomImg:'',
                businessHours:[1,0,0,0,0,0,0],
                roomAccommodate:'',
            })
        },
        /**
         * 删除房间
         */
        delRoom: function () {
            let that = this
            let bol = false
            if(that.list.length == 1) {
              that.$alert('不能删除默认房间!')
              return false
            }
             that.list.map( (val,index) => {
                 if (val.change) {
                     that.list.splice(index,index+1)
                     bol = true
                 }
             })
             if(!bol) {
               that.$alert('请选择房间!')
             }
        },
        /**
         * 保存
         */
        saveRoom: function () {
            let that = this
            that.$router.push({
                path:'/main'
            })
        }
    },
    mounted () {
        this.getRoomList()
        
    }
};
</script>
<style scoped>
.btn {
    height: 55px;
    text-align: center;
    margin-bottom: 107px;
}
.btn > div {
    width: 255px;
    line-height: 55px;
    height: 55px;
    background:#085dab;
    font-size:18px;
color:#ffffff;
text-align: center;
font-weight: bold;
margin-left: 63px;
display: inline-block;
cursor: pointer;
}
.btn > div:first-of-type {
    margin-left: 0;
}
.wrap {
  padding: 68px 136px;
  width: 100%;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
  margin-bottom: 42px;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.continer {
  background: #ffffff;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  width: 1475px;
  /* height: 2535px; */
  display: inline-block;
  margin-left: 48px;
}
.home_sit_bg {
  line-height: 100px;
  width: 300px;
  margin-left: 95px;
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #000000;
  font-weight: bold;
}
.section {
  width: 100%;
  overflow: hidden;
  display: block;
}
.xian {
  background: #f5f5f5;
  width: 1423px;
  height: 3px;
  margin: 0 auto;
}
.left_box {
  float: left;

  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.02px;
  text-align: left;
  padding-bottom: 39px;
}
.checkroom {
    background:#1989fa;
border-radius:2px;
width:25px;
height:25px;
float: left;
margin-left: 25px;
margin-right: 45px;
margin-top: 7px;
}
.form_ab_house label:first-child {
    margin-left: 0px;
}
.text_nm {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
}
.first_ip {
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 317px;
  height: 40px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 18px;
  color: #888888;
}
.next_ip {
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 230px;
  height: 40px;
  padding: 0 10px;
  margin: 0;
  float: left;
  box-sizing: border-box;
  font-size: 18px;
  color: #888888;
}
.form_ab_house label {
  margin: 39px 0 0 95px;
  padding: 0;
  display: block;
  overflow: hidden;
}
.form_ab_house label a {
  display: block;
  width: 200px;
  float: left;
}
.pl_photo {
  width: 320px;
  height: 205px;
}
.blue_part {
  background: #085dab;
  border: 1px solid #979797;
  width: 87px;
  height: 38px;
  color: #ffffff;
  margin-left: 0;
  text-align: center;
  line-height: 42px;
  vertical-align: bottom;
  float: left;
  font-size: 18px;
  color: #ffffff;
  margin-left: -2px;
  margin-top: -1px;
}
.input_box {
  width: 400px;
  height: 40px;
  display: inline-block;
}
.red_tips {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #da260e;
  letter-spacing: 0;
  text-align: left;
  margin-left: 355px;
  line-height: 88px;
  font-weight: bold;
}
.red {
  width: 10px;
  height: 10px;
  padding: 15px 5px;
  float: left;
}
.check_part {
  margin-left: 20px;
  background: #ffffff;
  border: 1px solid #979797;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align:middle;  
}
.check_part:first-of-type {
    margin-left: 0;
}
.right_box {
  float: left;

  margin-top: 39px;
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.02px;
  text-align: left;
  overflow: hidden;
  width: 500px;
}
.three_box {
  background: #ffffff;
  border: 1px solid #085dab;
  border-radius: 3px;
  width: 114px;
  height: 38px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #085dab;
  letter-spacing: 0.02px;
  text-align: center;
  line-height: 38px;
  margin-right: 36px;
  float: left;
}

.tips_wx {
  width: 471;
  height: 75px;
  line-height: 37px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  letter-spacing: 0.03px;
  font-weight: bold;
  clear: left;
  margin-top: 227px;
}
.cli_part {
  background: #085dab;
  width: 255px;
  height: 55px;
  margin-top: 49px;
  text-align: center;
  line-height: 55px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0.03px;
}
</style>
